<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #wrap {
            /* height: 400px;
            width: 400px;
            position: relative; */
        }

        #content {
            position: relative;
            height: 400px;
            width: 400px;
        }

        #shadow {
            height: 50px;
            width: 50px;
            /* border-radius: 50%; */
            position: absolute;
            background-color: rgba(66, 166, 166, 0.4);
            left: 0;
            top: 0;
            /* overflow: hidden; */
            /* display: none; */
            /* z-index: 99; */
        }

        #bigContent {
            position: absolute;
            height: 50px;
            width: 50px;
            /* left: 500px; */
            /* top:300px; */
            overflow: hidden;
            /* display: none; */
            /* border: 1px solid black; */
            /* border-radius: 50% */
        }

        #smallImg {
            height: 400px;
            width: 400px;
        }

        #bigImg {
            height: 400px;
            width: 400px;
            position: absolute;
            display: block;
        }

        #box {
            width: 400px;
            height: 50px;
            background: gainsboro;
            position: absolute;
            left: 0;
            top: 430px;
            border-radius: 30px;

        }

        #button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: cadetblue;
            position: absolute;

        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="content">
            <img src="img/small1.jpg" id="smallImg" />
            <div id="shadow"></div>
            <div id="bigContent">
                <img src="img/small1.jpg" id="bigImg" />
            </div>
        </div>
        <div id="box">
            <div id="button"></div>
        </div>
        <script>
            var shadow = document.getElementById("shadow")
            var content = document.getElementById("content")
            var bigimg = document.getElementById("bigImg")
            var bigcontent = document.getElementById("bigContent")
            var box = document.getElementById("box")
            var button = document.getElementById("button")
            var xmin = 0
            var xmax = content.clientWidth - shadow.clientWidth
            var ymin = 0
            var ymax = content.clientHeight - shadow.clientHeight
            var leftR = parseInt(Math.random() * xmax)

            while (leftR < 200) {
                leftR = parseInt(Math.random() * xmax)
            }

            var topR = parseInt(Math.random() * ymax)
            // console.log(leftR,topR)
            shadow.style.left = leftR + "px"
            shadow.style.top = topR + "px"
            bigcontent.style.left = 0
            bigcontent.style.top = topR + "px"
            bigimg.style.left = -leftR + "px"
            bigimg.style.top = -topR + "px"
            button.onmousedown = function (e) {
                var butx = e.offsetX;
                var buty = e.offsetY;
                document.onmousemove = function (e) {
                    var x = e.pageX - box.offsetLeft - butx
                    var maxwidth = box.clientWidth - button.clientWidth
                    // console.log(maxwidth)
                    if (x <= 0) {
                        x = 0
                    }
                    if (x >= maxwidth) {
                        x = maxwidth
                    }
                    button.style.left = x + "px"
                    bigcontent.style.left = x + "px"
                }
                document.onmouseup = function () {
                    document.onmousemove = ""
                    if (bigcontent.offsetLeft >= leftR - 5 && bigcontent.offsetLeft <= leftR + 5) {
                        console.log("验证正确")
                        location.href="https://www.baidu.com"
                    }
                    else {
                        var i=3                       
                        function fn(){
                        var start = button.offsetLeft;
                        var end = 0
                        var speed = (end - start) / 50;
                        console.log(start, end, speed)
                        var time = setInterval(function () {
                            button.style.left = (parseFloat(button.style.left) + speed) + "px"
                            bigcontent.style.left = (parseFloat(bigcontent.style.left) + speed) + "px"
                            if (button.offsetLeft == 0) {
                                clearInterval(time)
                            }
                        }, 10)  
                    }         


                        var time=null
                        active(fn)                       
                        function active(fn){
                            if(i<=0){
                                clearTimeout(time)
                                if(fn){
                                setTimeout(fn,500)
                                }
                                return false
                            }
                            else{
                            wrap.style.marginLeft = (wrap.offsetLeft - 8) + "px"
                                var time=setTimeout(function(){
                                wrap.style.marginLeft = (wrap.offsetLeft + 8) + "px"
                                    setTimeout(function(){
                                        clearTimeout(time)
                                        i--;
                                        active(fn)
                                    },50)   
                                },50)                          
                            }
                        }
                    }

                        // fn(3);
                        // function fn(i) {
                        //     clearTimeout(time)
                        //     if (i == 0) {
                        //         return false
                        //     }
                        //     wrap.style.marginLeft = (wrap.offsetLeft - 8) + "px"
                        //     var time = setTimeout(function () {
                        //         wrap.style.marginLeft = (wrap.offsetLeft + 8) + "px"
                        //         setTimeout(function () {
                        //             i--
                        //             fn(i)
                        //         }, 50)
                        //     }, 50)
                        // }
                }
            }
        </script>
</body>

</html>